<template>
  <div :class="$style.supplement">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="supplementForm"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <el-form-item prop="idLike" label="补件申请单号">
            <el-input v-model="formData.idLike" clearable placeholder="请输入补件申请单号" />
          </el-form-item>
          <el-form-item prop="officeName" label="办事处名称">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/office/ref/page"
              placeholder="请选择办事处名称"
              method="get"
              lable-name="name"
              value-name="name"
              :value.sync="formData.officeName"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="disName" label="客户">
            <el-input v-model="formData.disName" clearable placeholder="请选择客户" />
          </el-form-item>
          <el-form-item prop="consumer" label="顾客姓名">
            <el-input v-model="formData.consumer" clearable placeholder="请选择顾客姓名" />
          </el-form-item>
          <el-form-item prop="pbillType" label="补件类型">
            <CustomDictSelect
              placeholder="请选择补件类型"
              dict-type-code="PATCH_TYPE"
              bind-name="dictName"
              bind-value="dictCode"
              :echo-value.sync="formData.pbillType"
            ></CustomDictSelect>
          </el-form-item>
          <el-form-item prop="patchModel" label="产品型号">
            <el-input v-model="formData.patchModel" clearable placeholder="请输入产品型号" />
          </el-form-item>
          <el-form-item prop="productType" label="产品类型">
            <CustomDictSelect
              placeholder="请输入产品类型"
              dict-type-code="BJ_PRODUCT_TYPE"
              bind-name="dictName"
              bind-value="dictCode"
              :echo-value.sync="formData.productType"
            ></CustomDictSelect>
          </el-form-item>
          <el-form-item prop="auditStatus" label="单据状态">
            <CustomDictSelect
              placeholder="请选择单据状态"
              dict-type-code="BJ_LISTTYPE"
              bind-name="dictName"
              bind-value="dictCode"
              :echo-value.sync="formData.auditStatus"
            ></CustomDictSelect>
          </el-form-item>
          <el-form-item prop="dateRange" label="填报时间" :span="7">
            <el-date-picker
              v-model="formData.dateRange"
              type="daterange"
              opt
              clearable
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item>
            <Button @click="resetClick('supplementForm')">重置</Button>
            <Button type="primary" enter @click="searchClick('supplementForm')">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="table-list-box">
        <el-table
          v-loading="isLoading"
          border
          height="330"
          highlight-current-row
          header-row-class-name="table-list-header"
          tooltip-effect="dark"
          style="width: 100%"
          :data="tableData"
        >
          <el-table-column prop="pbillId" label="补件申请单号" width="180" align="center" />
          <el-table-column prop="auditStatus" label="单据状态" width="160" align="center">
            <template slot-scope="scope">{{ findAuditStatus(scope.row.auditStatus) }}</template>
          </el-table-column>
          <el-table-column prop="auditStateTime" label="操作时间" width="140"></el-table-column>
          <el-table-column prop="declareTime" label="提报时间" width="160" align="center" />
          <el-table-column prop="disName" label="客户" width="220" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="officeName" label="办事处" width="180" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="consumer" label="顾客姓名" width="120" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="patchModel" label="产品型号" width="120" align="center" />
          <el-table-column prop="productTypeName" label="产品类型" width="120" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="productName" label="产品名称" width="120" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="pbillName" label="补件名称" width="160" align="center" :show-overflow-tooltip="true" />
          <el-table-column label="补件类型" width="120" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ getDictName(scope.row.pbillType,pbillTypeList) }}</template>
          </el-table-column>
          <el-table-column prop="num" label="数量" align="center" />
          <el-table-column prop="reviewNum" label="复审数量" width="120" align="center" />
          <el-table-column prop="proPlantName" label="实际生产厂" width="100" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="logisticsMode" label="物流方式" width="120" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ findLogisticsMode(scope.row.logisticsMode) }}</template>
          </el-table-column>
          <el-table-column prop="carNum" label="车牌号" width="130" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="shopToName" label="送达方" width="200" align="center" :show-overflow-tooltip="true" />
        </el-table>
      </div>
      <CustomPagination
        :total="pageInfo.total"
        :page="pageInfo.page"
        :limit="pageInfo.pageSize"
        @pagination="paginationChange"
      ></CustomPagination>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import CustomDictSelect from '@/components/CustomDictSelect'
import CustomPagination from '@/components/CustomPagination'
import { deepCopy } from '@/utils/'
import { getPBillInfo } from '@/api/pBill'
import { getDictByType, ccDict } from '@/api/dataDict'
export default {
  name: 'InfoDataSupplement',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    SearchSelectPicker,
    CustomDictSelect,
    CustomPagination
  },
  data() {
    return {
      isLoading: false,
      pickerOptions: {
        disabledDate(v) {
          return v.getTime() > new Date().getTime()
        }
      },
      formData: {
        idLike: '', // 补件申请单号
        officeName: '', // 办事处
        dateRange: [],
        disName: '', // 客户 > 经销商
        consumer: '', // 顾客姓名
        pbillType: '', // 补件类型
        patchModel: '', // 产品型号
        productType: '', // 产品类型
        auditStatus: '' // 单据状态
      },
      formRules: {},
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      auditStatusOption: [],
      logisticsModeOption: [],
      pbillTypeList: []
    }
  },
  created() {
    // PATCH_TYPE 补件类型
    // BJ_PRODUCT_TYPE 补件产品类型
    // BJ_LISTTYPE 补件单据状态
    this.getDataDict({ type: 'auditStatus', ditctType: 'BJ_LISTTYPE' })
    this.getDataDict({ type: 'logisticsMode', ditctType: 'BJ_LOGISTICSMODE' })
    ccDict('PATCH_TYPE').then(res => {
      this.pbillTypeList = res.data
    })
  },
  mounted() {},
  methods: {
    /**
     * 获取数据字典
     */
    getDataDict({ type, ditctType }) {
      const dictTypeCode = ditctType
      const appCode = 'call-center'
      const domainCode = 'marketing'
      const parmas = {
        dictTypeCode,
        appCode,
        domainCode
      }
      getDictByType(parmas).then(res => {
        const data = res.data || []
        if (Array.isArray(data)) {
          if (type === 'auditStatus') this.auditStatusOption = data
          if (type === 'logisticsMode') this.logisticsModeOption = data
        }
      })
    },
    // 查找单据状态值
    findAuditStatus(code) {
      if (!code) return '--'
      const obj = this.auditStatusOption.find(list => {
        return list.dictCode === code
      })
      if (typeof obj === 'object' && Object.keys(obj).length) {
        return obj.dictName
      }
      return '--'
    },
    // 查找物流方式
    findLogisticsMode(code) {
      if (!code) return '--'
      const obj = this.logisticsModeOption.find(list => {
        return list.dictCode === code
      })
      if (typeof obj === 'object' && Object.keys(obj).length) {
        return obj.dictName
      }
      return '--'
    },
    /**
     * 提交查询
     */
    searchClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = deepCopy(this.formData)
          Object.keys(params).forEach(k => {
            if (params[k] === '') {
              delete params[k]
            }
          })
          if (params.dateRange === null || params.dateRange.length === 0) delete params.dateRange
          if (Object.keys(params).length === 0) {
            this.$message({
              message: '请至少输入一项查询条件',
              type: 'warning'
            })
            return
          }
          this.getPBillDataInfo()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetClick(formName) {
      Object.keys(this.formData).forEach(key => {
        this.$set(this.formData, key, '')
        if (key === 'dateRange') this.$set(this.formData, key, [])
      })
      this.$refs[formName].resetFields()
    },
    // 获取补件信息列表
    getPBillDataInfo() {
      const params = deepCopy(this.formData)
      params.pageIndex = this.pageInfo.page
      params.pageSize = this.pageInfo.pageSize
      if (Array.isArray(params.dateRange) && params.dateRange.length === 2) {
        params.startTime = params.dateRange[0]
        params.endTime = params.dateRange[1]
      }
      this.$nextTick(() => {
        delete params.dateRange
      })
      Object.keys(params).forEach(key => {
        if (params[key] === '') delete params[key]
      })
      this.isLoading = true
      getPBillInfo(params).then(res => {
        if (res.success === 1) {
          this.tableData = res.data.records
          this.pageInfo.total = res.data.total
          this.$nextTick(() => {
            this.isLoading = false
          })
        }
      }, () => {
        this.isLoading = false
        this.tableData = []
        this.pageInfo.total = 0
      })
    },
    /**
     * 选择每页多少条
     */
    handleSizeChange(pageSize) {
      this.$set(this.pageInfo, 'page', 1)
      this.$set(this.pageInfo, 'pageSize', pageSize)
      this.$nextTick(() => {
        this.getPBillDataInfo()
      })
    },
    /**
     * 分页
     */
    handleCurrentChange(currrentPage) {
      this.$set(this.pageInfo, 'page', currrentPage)
      this.$nextTick(() => {
        this.getPBillDataInfo()
      })
    },
    // 分页返回相应请求参数
    paginationChange(paramsObj) {
      this.$set(this.pageInfo, 'pageSize', paramsObj.rows)
      this.$set(this.pageInfo, 'page', paramsObj.page)
      this.$nextTick(() => {
        this.getPBillDataInfo()
      })
    },
    getDictName(val, list) {
      if (!val) {
        return ''
      }
      let ary = []
      if (Array.isArray(val)) {
        ary = val
      } else {
        ary = val.split(',')
      }
      if (ary.length > 1) {
        const resAry = []
        for (const i in val) {
          resAry.push(this.getDictName(val[i], list))
        }
        return resAry.join(',')
      } else {
        const obj = list.find(e => { return e.dictCode === ary[0] || e.dictId === ary[0] || e.dictTypeId === ary[0] })
        return obj ? obj.dictName : ary[0]
      }
    }
  }
}
</script>

<style lang="scss" module>
.supplement {}
</style>
